<template>
  <div class="department">
    <page-content
      :tableConfig="tableConfig"
      title="部门"
      pageName="department"
      @newBtnClickEvent="handleNewBtnClick"
      @editBtnEventClick="handleEditBtnClick"
    ></page-content>

    <page-model
      ref="pageModelRef"
      :modelConfig="modelConfig"
      :defalultInfo="pageModelInfo"
      pageName="department"
    ></page-model>
  </div>
</template>

<script lang="ts">
import { defineComponent, watch } from 'vue'
import { tableConfig } from './config/content.config'
import { modelConfig } from './config/model.config'
import { usePageModel } from '@/hooks/use-page-model'

export default defineComponent({
  name: 'department',
  setup() {
    //1:从pagemodel hook导入公共函数
    const [pageModelInfo, pageModelRef, handleEditBtnClick, handleNewBtnClick] =
      usePageModel()

    //2:编辑时候显示部门id,新增时候隐藏部门id
    const departmentIdItem = modelConfig.formItems.find(
      (item) => item.field === 'id'
    )
    watch(pageModelInfo, (newValue) => {
      if (Object.keys(newValue).length > 0) {
        departmentIdItem!.isHidden = false
      } else {
        departmentIdItem!.isHidden = true
      }
    })

    return {
      tableConfig,
      modelConfig,
      pageModelInfo,
      pageModelRef,
      handleEditBtnClick,
      handleNewBtnClick
    }
  }
})
</script>

<style scoped lang="less"></style>
